<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const pv = ref(0)
const users = ref(0)
const articles = ref(0)
let chart: echarts.ECharts | null = null

function genMockPV(days = 7) {
  const base = Date.now()
  return Array.from({ length: days }).map((_, i) => ({
    date: new Date(base - (days - i - 1) * 86400000).toLocaleDateString(),
    value: Math.floor(500 + Math.random() * 1500)
  }))
}

const series = ref(genMockPV())

const fetchMetrics = () => {
  // 这里替换为后端 API：/metrics
  pv.value = Math.floor(1000 + Math.random() * 500)
  users.value = Math.floor(500 + Math.random() * 200)
  articles.value = Math.floor(80 + Math.random() * 20)
}

onMounted(() => {
  fetchMetrics()
  const el = document.getElementById('pv-chart')!
  chart = echarts.init(el)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: series.value.map(d => d.date) },
    yAxis: { type: 'value' },
    series: [{ type: 'line', smooth: true, data: series.value.map(d => d.value) }]
  })
  setInterval(() => {
    fetchMetrics()
    const next = series.value.slice(1).concat({ date: new Date().toLocaleTimeString(), value: Math.floor(800 + Math.random() * 1200) })
    series.value = next
    chart?.setOption({
      xAxis: { data: series.value.map(d => d.date) },
      series: [{ data: series.value.map(d => d.value) }]
    })
  }, 5000)
})
</script>

<template>
  <div style="padding:16px">
    <el-row :gutter="16">
      <el-col :span="6"><el-card>今日PV：{{ pv }}</el-card></el-col>
      <el-col :span="6"><el-card>用户数：{{ users }}</el-card></el-col>
      <el-col :span="6"><el-card>文章：{{ articles }}</el-card></el-col>
      <el-col :span="6"><el-card>在线：--</el-card></el-col>
    </el-row>
    <el-card style="margin-top:16px">
      <div id="pv-chart" style="height:300px"></div>
    </el-card>
  </div>
  
</template>

<style scoped>
</style>


